﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>2.7简单的组件间传值</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>2.7简单的组件间传值</h1>

<div id="app">
    <!--把input的value值和app实例中的$data中的inpValue的值进行了双向绑定 一个变化，另一个就会跟着变化-->
    <input type="text" v-model="inpValue" />
    <button @click="handleClick">提交</button>
    <ul>
        <todo-item :content="item" v-for="(item,index) in list" :key="index"></todo-item>
    </ul>

</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>

    // 创建Vue实例，接管id为app的dom元素，数据是data里的content

    var TodoItem = {
        props:['content'],
        template:'<li @click="handleItemClick">{{content}}</li>',
        methods:{
            handleItemClick(){
                alert(1)
            }
        }
    };

    //页面可以通过{{}}的方式渲染
    var app = new Vue({
        components:{
            TodoItem
        },
        el:'#app',
        data:{
            inpValue:'',
            list:['v-for是内置指令循环当前dom元素','v-on:click显得太臃肿，后期只要是事件的绑定都用@click这样的形式出面','v-model数据的双向绑定,另外一般v-model用于在表单元素下']
        },
        methods:{
            handleClick(){
                this.list.push(this.inpValue);
                this.inpValue = '';
            }
        }
    });

</script>

</body>
</html>
